<template>
  <baidu-map
    class="map"
    :center="center"
    :zoom="zoom"
    :scroll-wheel-zoom="scrollwheelzoom"
  >
    <!-- 比例尺 -->
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
    <!-- 地图类型 -->
    <bm-map-type
      :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
      anchor="BMAP_ANCHOR_TOP_LEFT"
    ></bm-map-type>
    <!-- 区域气泡 -->
    <div v-for="(item, index) in zoneGeoPoints" :key="index">
      <MapType @click.native="goinFn(item, index)" :item="item" :index="index">
      </MapType>
    </div>
  </baidu-map>
</template>
<script>
import MapType from '@/components/MapType.vue'
import { getMap, getNewMap } from '@/api/atticle'
export default {
  name: 'city-page',
  components: {
    MapType
  },
  data () {
    return {
      minzoom: 12,
      zoom: 12,
      zoneGeoPoints: [],
      center: { lng: 116.449979, lat: 39.912338 },
      scrollwheelzoom: true
    }
  },
  async created () {
    const { body } = await getMap()
    console.log(body)
    // this.list.push(body)
    // console.log(this.list)
    this.zoneGeoPoints = body
    console.log(this.zoneGeoPoints[0].label)
  },
  methods: {
    async goinFn (item, index) {
      console.log(item, index)
      const { body } = await getNewMap(item.value)
      console.log(body)
      this.zoneGeoPoints = body
    },
    draw ({ el, BMap, map }) {
      console.log('el', el)
      const pixel = map.pointToOverlayPixel(new BMap.Point(el.lng, el.lat))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    }
  }
}
</script>

<style>
.map {
  width: 100%;
  height: 100vh;
}
</style>
